<template>
	<view class="root">
		<ul class="">
			<li style="margin-bottom: 50rpx;" class="margin-bottom_10 cecord-li" v-for="(item, index) in recordList" :key="index" @click="seeAccount(item)">
				<view class="flex items-center line">
					<!--  提现方式{0微信,1支付宝,2银行卡} -->
					<Icon v-if="item.withdrawal_way == 1" type="icontubiaoku-" size="45" color="#109EF0"></Icon>
					<Icon v-if="item.withdrawal_way == 0" type="iconweixin" size="45" color="#41BD28"></Icon>
					<!-- <Icon v-if="item.type == 2" type="iconweixin" size="45" color="#41BD28"></Icon> -->
					<view>
						<view class="name">
							<text v-if="item.withdrawal_way == 0">微信支付</text>
							<text v-if="item.withdrawal_way == 1">支付宝支付</text>
						</view>
						<view class="gray time">{{ item.add_time }}</view>
					</view>
					<view class="flex-1 text-right">
						￥
						<text class="money">{{ item.withdrawal_money }}</text>
					</view>
				</view>
				<view class="text-right record-status">
					<!-- 到账{0未，1已到，2打款中} -->
					<text v-if="item.status == 3" style="color: red;">被驳回</text>
					<text v-else-if="item.state == 1" class="gray">已到账</text>
					<text v-else-if="item.state == 0" class="main-color">未到账</text>
					<text v-else-if="item.state == 2" class="main-color">打款中</text>
				</view>
				<view v-if="item.status == 3" class="record-status">
					<!-- 到账{0未，1已到，2打款中} -->
					<text style="color: red;">驳回原因：{{item.reject_reason}}</text>
				</view>
			</li>
		</ul>
		<uni-popup ref="popup" type="center" maskClick="false">
			<msg-content title="提现账户信息" :icon="image_header+'withdraw.png' " @sendcancel="close">
				<view class=" gray info-account">
					<view>姓名:{{ curAccount.name }}</view>
					<view>账号:{{ curAccount.account }}</view>
				</view>
			</msg-content>
		</uni-popup>

		<view class="loading">
			<block v-if="isLoading">
				<image src="https://mall.xzthealth.com/loading2.gif"></image>
				<text>加载中</text>
			</block>
		</view>
		<without v-if="!isLoading" :showImg="isIcon" :tip="tip"></without>
	</view>
</template>

<script>
let App = getApp().globalData;
import Icon from '@/components/Icon/Icon.vue';
import uniPopup from '@/components/uni-popup/uni-popup.vue';
import msgContent from '@/components/msg-content.vue';
import without from '@/components/without.vue';

export default {
	components: {
		Icon,
		uniPopup,
		msgContent,
		without
	},
	data() {
		return {
			recordList: [],
			curAccount: {},
			page: 1,
			limit: 10,
			tip: '暂无数据',
			isLoading: false,
			isIcon: true,
			image_header:""
		};
	},
	async onLoad() {
		await this.$onLaunched;
		this.userWithdrawalRecord();
		this.image_header = this.$store.image_header;
		
	},
	methods: {
		userWithdrawalRecord() {
			let obj = {
				distributor_id: '',
				page: this.page,
				limit: this.limit
			};
			let _self = this;
			this.$request('Distribution/MiniDistributor/userWithdrawalRecord', obj).then(res => {
				if (res.status === 1) {
					_self.count = res.data.count;
					_self.isLoading = false;
					_self.isIcon = false;
					
					if (res.data && res.data.list && res.data.list.length > 0) {
						_self.tip = '我是有底线的';
						_self.recordList = _self.recordList.concat(res.data.list);
					}else {
						_self.isIcon = true;
						_self.tip = '暂无数据';
					}
				} else {
					_self.recordList = [];
					_self.isIcon = true;
					_self.tip = '暂无数据';
					_self.isLoading = false;
					App.showToast({
						title: res.msg,
						icon: 'none'
					});
				}
			});
		},

		seeAccount(item) {
			if (item && item.withdrawal_account) {
				this.curAccount = item.withdrawal_account;
				this.$refs.popup.open();
			} else {
				App.showToast({
					title: '暂无信息',
					icon: 'none'
				});
			}
		},
		close() {
			this.$refs.popup.close();
		}
	},

	onReachBottom() {
		if (this.count > this.recordList.length) {
			this.isLoading = true;
			this.page++;
			this.userWithdrawalRecord();
		} else {
			this.tip = '已加载全部了!';
		}
	}
};
</script>

<style lang="less">
@import '@/common/index.less';
page {
	.bg;
}
.root {
	box-sizing: border-box;
	padding: 20rpx 40rpx;
}
.cecord-li {
	box-sizing: border-box;
	padding: 20rpx;
	background-color: #fff;
	border-radius: 8px;
	padding-bottom: 10rpx;
}
.line {
	border-bottom: 1px solid #f6f6f6;
}
.time {
	font-size: 28rpx;
}
.record-status {
	font-size: 26rpx;
	padding-top: 10rpx;
}
.name {
	margin-bottom: 8rpx;
	font-size: 28;
}
.money {
	font-size: 34rpx;
}
.fw {
	font-weight: 600;
}

.info-account {
	box-sizing: border-box;
	padding: 30rpx 45rpx 50rpx;
}
/deep/ .uni-popup__wrapper-box {
	width: 70%;
}
</style>
